<template>
    <view class="body">
        <view class="top_block"
            :style="{'padding-top':StatusBar*2+20+'rpx','height': StatusBar*2+300+'rpx','background-color':backColor,}">
            <!-- 导航栏 -->
            <!-- <view class="navbar_wrap">
                <view class="navbar">
                    <view class="left" @tap="navTo('back')">
                        <image src="@/static/icon/p_039.png" mode="heightFix" class="arrow-right">
                        </image>
                    </view>
                    <view class="title">
                        用户实名
                    </view>
                    <view class="right"></view>
                </view>
            </view> -->

            <view class="steps">
                <view class="state">
                    <p class="step1">1</p>
                    <p class="line1">
                        <em class="line2"></em>
                    </p>
                    <p class="step2 justColor">2</p>
                </view>
                <view class="stateDes">
                    <p>设备绑定</p>
                    <p>实名认证</p>
                </view>

            </view>

            <view class="form mtop50">
                <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">
                    <u-form-item label="设备编号/卡编号" labelWidth="120px" prop="cardNo" borderBottom ref="item2">
                        <u--input v-model="form.cardNo" type="cardNo" border="none" clearable
                            placeholder="请输入设备编号/卡编号"></u--input>
                        <u-icon slot="right" @tap="getScanCode" name="scan" size="26"></u-icon>
                    </u-form-item>
                </u--form>
            </view>
            <view class="mtop40 btnBind">
                <u-button text="绑定设备" color="#5079ed" shape="circle" @click="goCombo()"></u-button>
            </view>
        </view>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
    import {
        bind
    } from '@/common/api.js'
    export default {
        data() {
            return {
                backColor: '#fff',
                form: {
                    cardNo: '',
                },
                rules: {
                    cardNo: ''
                }


            }
        },
        methods: {

            // 扫一扫
            getScanCode() {
                // #ifdef !H5
                // uni.scanCode({
                //     success: function(res) {
                //         console.log('条码类型：' + res.scanType);
                //         this.form.cardNo = res.result
                //         console.log('条码内容：' + this.form.cardNo);
                //     }
                // });
                this.scanStart()
                // #endif

                // #ifdef H5
                console.log('我是H5平台');
                // #endif
            },

            scanStart() {
                uni.scanCode({
                    scanType: ['barCode'],
                    success: (res) => {
                        // console.log('条码类型：' + res.scanType);
                        this.form.cardNo = res.result
                        console.log('条码内容：' + res.result);
                    }
                });
            },
            scanEnd() {
                uni.scanCode({
                    scanType: ['barCode'],
                    success: (res) => {
                        // console.log('条码类型：' + res.scanType);
                        // console.log('条码内容：' + res.result);
                        this.form.cardNo = res.result
                    }
                });
            },
            onScan() {
                uni.scanCode({
                    scanType: ['barCode'],
                    success: (res) => {
                        // console.log('条码类型：' + res.scanType);
                        // console.log('条码内容：' + res.result);
                        this.form.cardNo = res.result
                    }
                });
            },



            navTo(value) {
                if (!value) {
                    return
                }
                if (value == 'back') {
                    uni.navigateBack()
                    return
                }
                uni.navigateTo({
                    url: value
                });
            },

            goCombo() {
                bind(this.form.cardNo).then((res) => {
                    let merchantId = res.data
                    if (res.status === 200 || res.status === 0) {
                        this.$refs.uToast.show({
                            message: '绑定成功',
                            complete() {
                                uni.navigateTo({
                                    url: `/pages/user/myCombo?merchantId=${merchantId}`
                                })
                            }
                        })
                    }
                })

            }
        }
    }
</script>

<style lang="scss">
    .body {
        font-size: 28rpx;

        .active {
            border: 1px solid #517af1 !important;
            color: #517af1 !important;
        }
    }

    .top_block {
        // padding-top: var(--status-bar-height);
        // padding-top: 60rpx !important;
        box-sizing: border-box;
        min-height: 800rpx;


        .navbar_wrap {
            width: 100%;
            color: #000;

            .navbar {
                position: relative;
                display: flex;
                align-items: center;
                width: 100%;
                // height: 88rpx;


                .title {
                    flex: 1;
                    text-align: center;
                    font-size: 36rpx;
                    font-family: Source Han Sans CN;
                    font-weight: bold;
                    color: #000;
                }

                .right {
                    flex-shrink: 0;
                    position: absolute;
                    right: 30rpx;

                    image {
                        width: 34rpx;
                        height: 40rpx;
                    }
                }

                .left {
                    position: absolute;

                    .arrow-right {
                        transform: rotate(360deg);
                        height: 45rpx;
                        padding-right: 20rpx;
                    }
                }
            }
        }


        .steps {
            width: 100%;
            margin-top: 80rpx;


            .stateDes {
                width: 70%;
                display: flex;
                justify-content: space-between;
                margin-left: 15%;
                margin-top: 40rpx;
                color: #333;
            }

            .state {
                width: 66%;
                display: flex;
                justify-content: space-around;
                margin-left: 17%;
                height: 20rpx;
                align-items: center;
                line-height: 20rpx;
                margin-top: 38rpx;

                .step1,
                .step2 {
                    width: 15%;
                    text-align: center;
                    width: 66rpx;
                    height: 66rpx;
                    line-height: 66rpx;
                    background-color: #007bff;
                    border-radius: 50%;
                    font-weight: 600;
                    font-size: 40rpx;
                    color: #fff;

                }

                .justColor {
                    background-color: #bbbbbb;
                }

                .line1 {
                    width: 70%;
                    height: 6rpx;
                    background-color: #bbbbbb;
                    position: relative;

                    .line2 {
                        width: 50%;
                        height: 6rpx;
                        position: absolute;
                        background-color: #007bff;
                    }
                }


            }

        }

        .form,
        .btnBind {
            width: 90%;
            margin-left: 5%;
        }

    }
</style>